<div class="selenium-notes">
<h1>Date Pickers in Selenium WebDriver</h1>
<p>A <strong>Date Picker</strong> is a user-interface component that allows users to select a date from a calendar instead of manually entering the date. Date pickers are commonly used in flight booking, hotel reservation, appointment scheduling, registration forms, banking applications, e-commerce applications, report filters, insurance systems, and many other web applications.</p>
<p>In Selenium WebDriver automation, handling date pickers requires understanding how the calendar is implemented in the HTML DOM. A date picker may be a standard HTML <code><input type="date"></code>, a custom calendar created with HTML and JavaScript, a date-range picker, a date-time picker, or a calendar component provided by a frontend framework.</p>
<p>Selenium training commonly covers WebDriver, locators, web elements, browser interactions, waits, dynamic elements, forms, dropdowns, TestNG, Page Object Model, and practical automation scenarios. Date Picker handling combines many of these Selenium concepts in one real-world automation task.</p>
<p><strong>Course Resources:</strong> <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">Selenium Training Course</a> | <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a></p>
<hr>
<h2>1. What Is a Date Picker?</h2>
<p>A date picker is a graphical calendar component that allows a user to choose a specific date. Instead of manually typing a date, the user can open a calendar, navigate between months or years, and select a day.</p>
<pre><code>Click Date Field
↓
Calendar Opens
↓
Read Current Month/Year
↓
Navigate to Required Month/Year
↓
Select Required Day
↓
Date Appears in Input
↓
Verify Selected Date</code></pre>
<hr>
<h2>2. Why Date Pickers Are Important in Selenium?</h2>
<p>Date selection is a common automation requirement because many business applications depend on dates.</p>
<ul>
<li>Flight departure and return dates</li>
<li>Hotel check-in and check-out dates</li>
<li>Doctor appointment dates</li>
<li>Job application dates</li>
<li>Bank transaction dates</li>
<li>Insurance policy dates</li>
<li>Delivery dates</li>
<li>Report filtering dates</li>
<li>Event registration dates</li>
<li>Employee joining and leave dates</li>
</ul>
<hr>
<h2>3. Types of Date Pickers</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Type</th><th>Description</th></tr>
<tr><td>HTML Date Input</td><td>Uses the standard <code><input type="date"></code> element.</td></tr>
<tr><td>Custom Date Picker</td><td>A calendar created using buttons, divs, spans, tables, or other HTML elements.</td></tr>
<tr><td>JavaScript Date Picker</td><td>A calendar controlled by JavaScript or a UI library.</td></tr>
<tr><td>Month/Year Picker</td><td>Allows users to select a month and year.</td></tr>
<tr><td>Date Range Picker</td><td>Allows users to select a start date and an end date.</td></tr>
<tr><td>Date-Time Picker</td><td>Allows users to select both date and time.</td></tr>
<tr><td>Multi-Date Picker</td><td>Allows multiple dates to be selected.</td></tr>
<tr><td>Searchable Date Picker</td><td>Allows dates to be searched or typed manually.</td></tr>
</table>
<hr>
<h2>4. Standard HTML Date Input</h2>
<p>A basic HTML date input may look like this:</p>
<pre><code><input type="date" id="dob"></code></pre>
<p>This is different from a custom calendar because the browser provides the date-selection interface.</p>
<hr>
<h2>5. Handling HTML Date Input</h2>
<p>When the date picker is a standard input element, Selenium can interact directly with the input.</p>
<pre><code>WebElement dateField = driver.findElement(
By.id("dob")
);
dateField.sendKeys("03/15/2026");</code></pre>
<p>The accepted date format can depend on the browser and implementation, so the expected format should be verified for the application under test.</p>
<hr>
<h2>6. Using JavaScript With HTML Date Input</h2>
<p>In some situations, JavaScript can be used to set the value of a standard date input.</p>
<pre><code>WebElement dateField = driver.findElement(
By.id("dob")
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].value='2026-03-15';",
dateField
);</code></pre>
<p>When using JavaScript, verify that the application's event handlers recognize the changed value correctly.</p>
<hr>
<h2>7. Custom Date Picker</h2>
<p>A custom date picker may contain separate controls for the previous month, next month, month name, year, and individual days.</p>
<pre><code><div class="datepicker">
<button class="previous">Previous</button>
<span class="month-year">March 2026</span>
<button class="next">Next</button>
<div class="days">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div></code></pre>
<p>In this situation, Selenium interacts with the individual elements instead of treating the entire calendar as one control.</p>
<hr>
<h2>8. Basic Custom Date Picker Flow</h2>
<pre><code>Locate Date Field
↓
Click Date Field
↓
Wait for Calendar
↓
Read Month and Year
↓
Compare With Target
↓
Click Previous/Next
↓
Locate Target Day
↓
Click Target Day
↓
Verify Date</code></pre>
<hr>
<h2>9. Open the Date Picker</h2>
<pre><code>driver.findElement(
By.id("departureDate")
).click();</code></pre>
<p>The click should open the calendar component.</p>
<hr>
<h2>10. Wait for the Calendar</h2>
<p>Dynamic date pickers may take some time to become visible. Explicit waits are generally more reliable than arbitrary sleep statements.</p>
<pre><code>WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);</code></pre>
<hr>
<h2>11. Locate Month and Year</h2>
<p>Many date pickers display the currently selected month and year in a header.</p>
<pre><code>WebElement monthYear = driver.findElement(
By.cssSelector(".month-year")
);
String displayedMonthYear =
monthYear.getText();
System.out.println(displayedMonthYear);</code></pre>
<hr>
<h2>12. Example Calendar Header</h2>
<pre><code><div class="calendar-header">
<button class="prev"><</button>
<span class="month-year">
March 2026
</span>
<button class="next">></button>
</div></code></pre>
<hr>
<h2>13. Locate Next Month Button</h2>
<pre><code>WebElement nextButton = driver.findElement(
By.cssSelector(".next")
);
nextButton.click();</code></pre>
<hr>
<h2>14. Locate Previous Month Button</h2>
<pre><code>WebElement previousButton = driver.findElement(
By.cssSelector(".prev")
);
previousButton.click();</code></pre>
<hr>
<h2>15. Navigate to a Future Month</h2>
<p>If the required date is in a future month, the next-month button can be clicked repeatedly until the target month and year are displayed.</p>
<pre><code>while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}</code></pre>
<hr>
<h2>16. Navigate to a Previous Month</h2>
<p>If the application allows past dates, the previous-month button can be used.</p>
<pre><code>while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("January 2026")) {
driver.findElement(
By.cssSelector(".prev")
).click();
}</code></pre>
<hr>
<h2>17. Why Month and Year Validation Is Important</h2>
<p>Selecting a day number without first validating the month and year can cause the wrong date to be selected. For example, a calendar may display days belonging to the previous or next month inside the current month's grid.</p>
<pre><code>Current Display:
March 2026
Target:
March 15, 2026
Correct Process:
Verify March 2026
↓
Locate 15
↓
Select 15</code></pre>
<hr>
<h2>18. Selecting a Day</h2>
<p>Once the required month and year are displayed, locate the target day.</p>
<pre><code>driver.findElement(
By.xpath("//button[normalize-space()='15']")
).click();</code></pre>
<p>This approach should only be used when the day number is unique within the relevant calendar.</p>
<hr>
<h2>19. Problem With Selecting Only the Day Number</h2>
<p>A locator such as <code>//button[normalize-space()='15']</code> may match more than one element if the calendar contains dates from adjacent months.</p>
<p>A better strategy is to use a stable date attribute when the application provides one.</p>
<hr>
<h2>20. Using data-date Attribute</h2>
<pre><code><button class="day"
data-date="2026-03-15">
15
</button></code></pre>
<p>Selenium can directly identify the exact date:</p>
<pre><code>driver.findElement(
By.cssSelector(
".day[data-date='2026-03-15']"
)
).click();</code></pre>
<hr>
<h2>21. XPath With data-date</h2>
<pre><code>driver.findElement(
By.xpath(
"//button[@data-date='2026-03-15']"
)
).click();</code></pre>
<hr>
<h2>22. Selecting a Date Using aria-label</h2>
<p>Accessible date pickers may expose the complete date through an ARIA attribute.</p>
<pre><code><button role="gridcell"
aria-label="March 15, 2026">
15
</button></code></pre>
<pre><code>driver.findElement(
By.cssSelector(
"[aria-label='March 15, 2026']"
)
).click();</code></pre>
<hr>
<h2>23. Handling Date Picker Tables</h2>
<p>Some date pickers use an HTML table to represent the calendar.</p>
<pre><code><table class="calendar">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table></code></pre>
<pre><code>driver.findElement(
By.xpath(
"//table[@class='calendar']//td[normalize-space()='15']"
)
).click();</code></pre>
<hr>
<h2>24. Handling Disabled Dates</h2>
<p>Date pickers often disable dates that cannot be selected.</p>
<pre><code><button class="day disabled"
disabled>
10
</button></code></pre>
<p>The test should verify that disabled dates behave according to the application's requirements.</p>
<hr>
<h2>25. Selecting Only Enabled Dates</h2>
<pre><code>WebElement date = driver.findElement(
By.xpath(
"//button[normalize-space()='15' and not(@disabled)]"
)
);
date.click();</code></pre>
<hr>
<h2>26. Past Dates</h2>
<p>Booking and appointment systems frequently restrict past dates.</p>
<pre><code>Past Dates
↓
Disabled
Today
↓
Available or Restricted
Future Dates
↓
Available</code></pre>
<p>The exact behavior depends on the application requirements.</p>
<hr>
<h2>27. Future Date Selection</h2>
<p>A typical future-date automation flow is:</p>
<ol>
<li>Open the date picker.</li>
<li>Read the current month and year.</li>
<li>Compare them with the target month and year.</li>
<li>Click the next-month button as required.</li>
<li>Verify the target month and year.</li>
<li>Select the target day.</li>
<li>Verify the selected value.</li>
</ol>
<hr>
<h2>28. Date Picker With Separate Month and Year Controls</h2>
<p>Some calendars provide separate month and year selectors.</p>
<pre><code><select class="month">
<option>January</option>
<option>February</option>
</select>
<select class="year">
<option>2026</option>
<option>2027</option>
</select></code></pre>
<p>If these are actual HTML <code><select></code> elements, Selenium's <code>Select</code> class can be used.</p>
<hr>
<h2>29. Selecting Month With Select</h2>
<pre><code>Select month = new Select(
driver.findElement(By.cssSelector(".month"))
);
month.selectByVisibleText("June");</code></pre>
<hr>
<h2>30. Selecting Year With Select</h2>
<pre><code>Select year = new Select(
driver.findElement(By.cssSelector(".year"))
);
year.selectByVisibleText("2026");</code></pre>
<hr>
<h2>31. Custom Month Dropdown</h2>
<p>If the month control is not an actual HTML <code><select></code>, do not use Selenium's <code>Select</code> class.</p>
<pre><code>driver.findElement(
By.id("monthDropdown")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='June']")
).click();</code></pre>
<hr>
<h2>32. Custom Year Dropdown</h2>
<pre><code>driver.findElement(
By.id("yearDropdown")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='2026']")
).click();</code></pre>
<hr>
<h2>33. Date Range Picker</h2>
<p>A date range picker allows users to select two dates, generally a start date and an end date.</p>
<pre><code>Start Date → 10 June 2026
End Date → 15 June 2026</code></pre>
<p>Date range pickers are common in travel websites, hotel booking systems, analytics dashboards, and reporting applications.</p>
<hr>
<h2>34. Date Range Selection Flow</h2>
<pre><code>Open Calendar
↓
Select Start Date
↓
Select End Date
↓
Calendar Updates Range
↓
Verify Start Date
↓
Verify End Date</code></pre>
<hr>
<h2>35. Selecting Start Date</h2>
<pre><code>driver.findElement(
By.cssSelector(
".day[data-date='2026-06-10']"
)
).click();</code></pre>
<hr>
<h2>36. Selecting End Date</h2>
<pre><code>driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();</code></pre>
<hr>
<h2>37. Verifying Date Range</h2>
<pre><code>String startDate = driver.findElement(
By.id("startDate")
).getAttribute("value");
String endDate = driver.findElement(
By.id("endDate")
).getAttribute("value");
System.out.println(startDate);
System.out.println(endDate);</code></pre>
<hr>
<h2>38. Date-Time Picker</h2>
<p>A date-time picker combines date selection with time selection.</p>
<pre><code>Select Date
↓
Select Time
↓
Select AM/PM if required
↓
Confirm</code></pre>
<hr>
<h2>39. Date-Time Picker Example</h2>
<pre><code>driver.findElement(
By.id("dateField")
).click();
driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
driver.findElement(
By.id("timeField")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='10:30 AM']")
).click();</code></pre>
<hr>
<h2>40. Searchable Date Picker</h2>
<p>Some date controls allow the user to type a date directly.</p>
<pre><code>WebElement input = driver.findElement(
By.id("dateSearch")
);
input.clear();
input.sendKeys("06/15/2026");</code></pre>
<hr>
<h2>41. Common Date Formats</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Format</th><th>Example</th></tr>
<tr><td>MM/dd/yyyy</td><td>06/15/2026</td></tr>
<tr><td>dd/MM/yyyy</td><td>15/06/2026</td></tr>
<tr><td>yyyy-MM-dd</td><td>2026-06-15</td></tr>
<tr><td>dd-MMM-yyyy</td><td>15-Jun-2026</td></tr>
<tr><td>MMM dd, yyyy</td><td>Jun 15, 2026</td></tr>
</table>
<p>The automation script should use the format expected by the application.</p>
<hr>
<h2>42. Java LocalDate</h2>
<p>Java's <code>LocalDate</code> class can be used to represent target dates in automation scripts.</p>
<pre><code>import java.time.LocalDate;
LocalDate targetDate =
LocalDate.of(2026, 6, 15);
System.out.println(targetDate);</code></pre>
<hr>
<h2>43. Getting Current Date</h2>
<pre><code>LocalDate today = LocalDate.now();
System.out.println(today);</code></pre>
<hr>
<h2>44. Getting Future Date</h2>
<pre><code>LocalDate futureDate =
LocalDate.now().plusDays(10);
System.out.println(futureDate);</code></pre>
<hr>
<h2>45. Getting Future Month</h2>
<pre><code>LocalDate futureDate =
LocalDate.now().plusMonths(2);
System.out.println(futureDate);</code></pre>
<hr>
<h2>46. Getting Previous Date</h2>
<pre><code>LocalDate previousDate =
LocalDate.now().minusDays(5);
System.out.println(previousDate);</code></pre>
<hr>
<h2>47. Extracting Day, Month and Year</h2>
<pre><code>LocalDate date =
LocalDate.of(2026, 6, 15);
int day = date.getDayOfMonth();
int month = date.getMonthValue();
int year = date.getYear();
System.out.println(day);
System.out.println(month);
System.out.println(year);</code></pre>
<hr>
<h2>48. Formatting LocalDate</h2>
<pre><code>import java.time.format.DateTimeFormatter;
LocalDate date =
LocalDate.of(2026, 6, 15);
DateTimeFormatter formatter =
DateTimeFormatter.ofPattern("dd/MM/yyyy");
String formattedDate =
date.format(formatter);
System.out.println(formattedDate);</code></pre>
<hr>
<h2>49. Selecting a Date Using LocalDate</h2>
<pre><code>LocalDate targetDate =
LocalDate.of(2026, 6, 15);
String dateValue =
targetDate.toString();
driver.findElement(
By.cssSelector(
".day[data-date='" + dateValue + "']"
)
).click();</code></pre>
<hr>
<h2>50. Dynamic Date Picker</h2>
<p>A dynamic date picker can change its DOM after every month navigation. This means previously stored WebElements may become invalid.</p>
<pre><code>Open Calendar
↓
Click Next
↓
DOM Refreshes
↓
Old Elements Become Stale
↓
Locate New Elements
↓
Continue Automation</code></pre>
<hr>
<h2>51. StaleElementReferenceException</h2>
<p><code>StaleElementReferenceException</code> may occur when an element previously located by Selenium is removed or replaced in the DOM.</p>
<p>Date pickers commonly cause this problem because clicking next or previous month can rebuild the calendar.</p>
<hr>
<h2>52. Avoiding Stale Elements</h2>
<p>Instead of keeping a WebElement reference throughout the entire navigation process, locate the element again after the calendar changes.</p>
<pre><code>while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}</code></pre>
<hr>
<h2>53. Explicit Wait for Target Date</h2>
<pre><code>WebElement date = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
);
date.click();</code></pre>
<hr>
<h2>54. Waiting for Target Month</h2>
<pre><code>wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.cssSelector(".month-year"),
"June 2026"
)
);</code></pre>
<hr>
<h2>55. Handling Calendar Animation</h2>
<p>Some date pickers animate when changing months. Clicking a date immediately after the navigation may fail if the calendar is still transitioning.</p>
<p>Wait for a specific calendar state, such as the target month being displayed, instead of relying on an arbitrary delay.</p>
<hr>
<h2>56. Handling ElementClickInterceptedException</h2>
<p><code>ElementClickInterceptedException</code> can occur when an overlay, animation, popup, or another element blocks the date.</p>
<ul>
<li>Wait for the calendar to become stable.</li>
<li>Wait for overlays to disappear.</li>
<li>Scroll the date into view.</li>
<li>Verify that the date is clickable.</li>
<li>Use JavaScript as a fallback when appropriate.</li>
</ul>
<hr>
<h2>57. Scrolling Date Into View</h2>
<pre><code>WebElement date = driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
);
((JavascriptExecutor) driver).executeScript(
"arguments[0].scrollIntoView({block:'center'});",
date
);
date.click();</code></pre>
<hr>
<h2>58. JavaScript Click</h2>
<pre><code>WebElement date = driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].click();",
date
);</code></pre>
<p>Normal WebDriver interaction should generally be preferred before using JavaScript as a fallback.</p>
<hr>
<h2>59. Handling Today's Date</h2>
<p>Some date pickers identify today's date using a CSS class or attribute.</p>
<pre><code><button class="day today"
data-date="2026-06-15">
15
</button></code></pre>
<pre><code>driver.findElement(
By.cssSelector(".day.today")
).click();</code></pre>
<hr>
<h2>60. Verifying Today's Date</h2>
<pre><code>WebElement today = driver.findElement(
By.cssSelector(".day.today")
);
String dateValue =
today.getAttribute("data-date");
System.out.println(dateValue);</code></pre>
<hr>
<h2>61. Verifying Selected Date</h2>
<p>After selecting a date, verify that the expected value appears in the input.</p>
<pre><code>String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
System.out.println(actualDate);</code></pre>
<hr>
<h2>62. TestNG Assertion</h2>
<pre><code>String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
Assert.assertEquals(
actualDate,
"06/15/2026"
);</code></pre>
<hr>
<h2>63. Date Picker in Flight Booking</h2>
<p>Flight booking applications commonly require departure and return dates.</p>
<pre><code>Click Departure Date
↓
Open Calendar
↓
Navigate to Target Month
↓
Select Departure Date
↓
Click Return Date
↓
Select Return Date
↓
Verify Both Dates
↓
Search Flights</code></pre>
<hr>
<h2>64. Flight Booking Example</h2>
<pre><code>driver.findElement(
By.id("departureDate")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-10']"
)
)
).click();
driver.findElement(
By.id("returnDate")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();</code></pre>
<hr>
<h2>65. Hotel Booking Date Picker</h2>
<p>Hotel booking applications generally require a check-in and check-out date.</p>
<pre><code>Check-in → 10 June 2026
Check-out → 15 June 2026</code></pre>
<p>The test should verify that both dates are selected correctly and that the resulting date range follows the application's validation rules.</p>
<hr>
<h2>66. Appointment Date Picker</h2>
<p>Appointment systems may restrict dates based on availability.</p>
<pre><code>Available Date
↓
Selectable
Unavailable Date
↓
Disabled
Past Date
↓
Restricted</code></pre>
<hr>
<h2>67. Available Date</h2>
<pre><code><button class="day available"
data-date="2026-06-10">
10
</button></code></pre>
<pre><code>driver.findElement(
By.cssSelector(
".day.available[data-date='2026-06-10']"
)
).click();</code></pre>
<hr>
<h2>68. Unavailable Date</h2>
<pre><code><button class="day unavailable"
disabled>
11
</button></code></pre>
<p>Negative testing should verify that the application prevents selection of unavailable dates.</p>
<hr>
<h2>69. Multiple Date Pickers on One Page</h2>
<p>A page may contain several date controls such as departure date, return date, start date, end date, or date-of-birth.</p>
<pre><code>WebElement departure = driver.findElement(
By.id("departureDate")
);
WebElement returnDate = driver.findElement(
By.id("returnDate")
);
departure.click();</code></pre>
<p>Use specific and scoped locators to avoid interacting with the wrong calendar.</p>
<hr>
<h2>70. Scoped Calendar Locator</h2>
<pre><code>WebElement calendar = driver.findElement(
By.id("departureCalendar")
);
calendar.findElement(
By.cssSelector(
".day[data-date='2026-06-10']"
)
).click();</code></pre>
<hr>
<h2>71. Multiple Calendars Displayed Together</h2>
<p>Some applications display two months at the same time.</p>
<pre><code>June 2026 July 2026
[Calendar 1] [Calendar 2]</code></pre>
<p>The automation should identify the correct calendar by reading its month and year before selecting the day.</p>
<hr>
<h2>72. Finding the Correct Calendar</h2>
<pre><code>List<WebElement> calendars =
driver.findElements(
By.cssSelector(".calendar")
);
for (WebElement calendar : calendars) {
String header = calendar.findElement(
By.cssSelector(".month-year")
).getText();
System.out.println(header);
}</code></pre>
<hr>
<h2>73. Selecting Date From Correct Calendar</h2>
<pre><code>List<WebElement> calendars =
driver.findElements(
By.cssSelector(".calendar")
);
for (WebElement calendar : calendars) {
String header = calendar.findElement(
By.cssSelector(".month-year")
).getText();
if (header.equals("June 2026")) {
calendar.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
break;
}
}</code></pre>
<hr>
<h2>74. Dynamic IDs in Date Pickers</h2>
<p>Some date elements have dynamically generated IDs.</p>
<pre><code><button id="date-872341">15</button></code></pre>
<p>Stable attributes such as <code>data-date</code>, <code>aria-label</code>, or meaningful classes are generally preferable.</p>
<hr>
<h2>75. starts-with() With Dynamic ID</h2>
<pre><code>driver.findElement(
By.xpath(
"//button[starts-with(@id,'date-') and normalize-space()='15']"
)
).click();</code></pre>
<hr>
<h2>76. contains() With Dynamic ID</h2>
<pre><code>driver.findElement(
By.xpath(
"//button[contains(@id,'date-') and normalize-space()='15']"
)
).click();</code></pre>
<hr>
<h2>77. ARIA Attributes</h2>
<p>Modern date pickers may use accessibility attributes to describe dates and selection states.</p>
<pre><code><button role="gridcell"
aria-label="June 15, 2026"
aria-selected="false">
15
</button></code></pre>
<hr>
<h2>78. Using aria-selected</h2>
<pre><code>String selected =
date.getAttribute("aria-selected");
if ("true".equals(selected)) {
System.out.println(
"Date is selected"
);
}</code></pre>
<hr>
<h2>79. Keyboard Navigation</h2>
<p>Some date pickers support keyboard controls such as arrow keys, Enter, Escape, Page Up, and Page Down.</p>
<pre><code>WebElement dateField = driver.findElement(
By.id("dateField")
);
dateField.click();
dateField.sendKeys(Keys.ARROW_RIGHT);
dateField.sendKeys(Keys.ENTER);</code></pre>
<hr>
<h2>80. Closing Calendar With Escape</h2>
<pre><code>dateField.sendKeys(Keys.ESCAPE);</code></pre>
<hr>
<h2>81. Date Picker Inside an iframe</h2>
<p>If the date picker exists inside an iframe, Selenium must switch into the iframe before interacting with its elements.</p>
<pre><code>WebElement frame = driver.findElement(
By.cssSelector("iframe")
);
driver.switchTo().frame(frame);
driver.findElement(
By.id("dateField")
).click();
driver.switchTo().defaultContent();</code></pre>
<hr>
<h2>82. Date Picker Inside a Modal</h2>
<pre><code>WebElement modal = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".modal")
)
);
modal.findElement(
By.id("dateField")
).click();
modal.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();</code></pre>
<hr>
<h2>83. Date Picker Inside Shadow DOM</h2>
<p>If the date picker is inside Shadow DOM, Selenium can obtain the shadow root and locate elements within it.</p>
<pre><code>WebElement host = driver.findElement(
By.cssSelector("custom-date-picker")
);
SearchContext shadowRoot =
host.getShadowRoot();
shadowRoot.findElement(
By.cssSelector("input")
).click();</code></pre>
<hr>
<h2>84. Date Picker With Icons</h2>
<p>Previous and next controls may use icons inside buttons.</p>
<pre><code><button class="calendar-next">
<span class="icon-arrow-right"></span>
</button></code></pre>
<p>Prefer locating the clickable button rather than its nested icon.</p>
<pre><code>driver.findElement(
By.cssSelector(".calendar-next")
).click();</code></pre>
<hr>
<h2>85. Locator Strategy for Date Pickers</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Locator</th><th>Usage</th></tr>
<tr><td>ID</td><td>Unique date field or calendar element</td></tr>
<tr><td>CSS Selector</td><td>Stable classes and attributes</td></tr>
<tr><td>XPath</td><td>Complex relationships and text-based selection</td></tr>
<tr><td>data-date</td><td>Exact date selection</td></tr>
<tr><td>aria-label</td><td>Accessible date representation</td></tr>
<tr><td>Role</td><td>Accessible calendar components</td></tr>
</table>
<hr>
<h2>86. Recommended Date Locator</h2>
<p>If the application exposes an exact date through a stable attribute, it is generally preferable to selecting only by the visible day number.</p>
<pre><code>By.cssSelector(
".day[data-date='2026-06-15']"
);</code></pre>
<hr>
<h2>87. Date Picker Exceptions</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Exception</th><th>Possible Cause</th></tr>
<tr><td>NoSuchElementException</td><td>Incorrect locator or element is not present.</td></tr>
<tr><td>TimeoutException</td><td>Required element did not appear within the wait period.</td></tr>
<tr><td>StaleElementReferenceException</td><td>Calendar DOM was refreshed.</td></tr>
<tr><td>ElementClickInterceptedException</td><td>Overlay or animation blocked the click.</td></tr>
<tr><td>ElementNotInteractableException</td><td>Element exists but cannot currently be interacted with.</td></tr>
</table>
<hr>
<h2>88. Handling NoSuchElementException</h2>
<p>Verify the locator, calendar visibility, frame context, Shadow DOM context, and page state before interacting with the element.</p>
<hr>
<h2>89. Handling TimeoutException</h2>
<p>Use an appropriate explicit wait and confirm that the expected calendar state actually occurs.</p>
<pre><code>wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);</code></pre>
<hr>
<h2>90. Handling StaleElementReferenceException</h2>
<p>Re-locate the calendar element after navigation because the DOM may have changed.</p>
<pre><code>driver.findElement(
By.cssSelector(".month-year")
).getText();</code></pre>
<hr>
<h2>91. Handling Click Intercepted Exception</h2>
<p>Wait for animations or overlays to finish before clicking the target date.</p>
<pre><code>wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();</code></pre>
<hr>
<h2>92. Common Mistakes</h2>
<ul>
<li>Assuming every date picker is a standard HTML date input.</li>
<li>Using the <code>Select</code> class on custom calendar elements.</li>
<li>Selecting a day without opening the calendar.</li>
<li>Selecting a day without checking the month and year.</li>
<li>Using only the visible day number when duplicate dates exist.</li>
<li>Ignoring disabled dates.</li>
<li>Using hard-coded waits unnecessarily.</li>
<li>Keeping stale WebElement references after navigation.</li>
<li>Ignoring iframe boundaries.</li>
<li>Ignoring Shadow DOM.</li>
<li>Using unstable generated IDs.</li>
<li>Not verifying the selected date.</li>
</ul>
<hr>
<h2>93. Best Practices</h2>
<ul>
<li>Inspect the date picker DOM before creating locators.</li>
<li>Identify whether the date picker is native or custom.</li>
<li>Prefer stable attributes such as <code>data-date</code>.</li>
<li>Use explicit waits for dynamic calendars.</li>
<li>Validate the displayed month and year.</li>
<li>Re-locate elements after DOM updates.</li>
<li>Scope locators when multiple calendars exist.</li>
<li>Handle disabled and unavailable dates.</li>
<li>Verify the final input value.</li>
<li>Use reusable date-picker methods.</li>
<li>Use Page Object Model in larger frameworks.</li>
<li>Use JavaScript only when normal WebDriver interaction is not suitable.</li>
</ul>
<hr>
<h2>94. Date Picker Automation Strategy</h2>
<pre><code>1. Inspect HTML
↓
2. Identify Date Picker Type
↓
3. Locate Date Field
↓
4. Open Calendar
↓
5. Locate Month/Year
↓
6. Navigate to Target Month
↓
7. Locate Target Date
↓
8. Select Date
↓
9. Verify Date
↓
10. Continue Test</code></pre>
<hr>
<h2>95. Practical Test Scenario</h2>
<p><strong>Scenario:</strong> Verify that a user can select 15 June 2026 from a custom date picker.</p>
<ol>
<li>Launch the browser.</li>
<li>Open the application.</li>
<li>Navigate to the required form.</li>
<li>Click the date field.</li>
<li>Wait for the calendar.</li>
<li>Read the current month and year.</li>
<li>Navigate to June 2026.</li>
<li>Locate 15 June 2026.</li>
<li>Click the date.</li>
<li>Verify the date field.</li>
</ol>
<hr>
<h2>96. Date Picker Test Case</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Step</th><th>Action</th><th>Expected Result</th></tr>
<tr><td>1</td><td>Open application</td><td>Application loads successfully.</td></tr>
<tr><td>2</td><td>Click date field</td><td>Calendar opens.</td></tr>
<tr><td>3</td><td>Navigate to June 2026</td><td>June 2026 is displayed.</td></tr>
<tr><td>4</td><td>Select June 15</td><td>June 15 is selected.</td></tr>
<tr><td>5</td><td>Verify field</td><td>Expected date is displayed.</td></tr>
</table>
<hr>
<h2>97. Complete Custom Date Picker Example</h2>
<pre><code>import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;
public class DatePickerTest {
private WebDriver driver;
private WebDriverWait wait;
@BeforeMethod
public void setUp() {
driver = new ChromeDriver();
driver.manage().window().maximize();
wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
driver.get("https://example.com");
}
@Test
public void selectDate() {
driver.findElement(
By.id("departureDate")
).click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);
while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
Assert.assertEquals(
actualDate,
"06/15/2026"
);
}
@AfterMethod
public void tearDown() {
driver.quit();
}
}</code></pre>
<hr>
<h2>98. Reusable Date Selection Method</h2>
<pre><code>public void selectDate(String date) {
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(
dateLocator
)
).click();
}</code></pre>
<hr>
<h2>99. Using Reusable Date Method</h2>
<pre><code>selectDate("2026-06-15");</code></pre>
<hr>
<h2>100. Date Picker Utility Method</h2>
<pre><code>public void selectDate(
By dateField,
String date) {
driver.findElement(dateField).click();
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(
dateLocator
)
).click();
}</code></pre>
<hr>
<h2>101. Using Date Picker Utility</h2>
<pre><code>selectDate(
By.id("departureDate"),
"2026-06-15"
);</code></pre>
<hr>
<h2>102. Page Object Model for Date Picker</h2>
<pre><code>public class BookingPage {
private WebDriver driver;
private By departureDate =
By.id("departureDate");
private By nextMonth =
By.cssSelector(".next");
public BookingPage(WebDriver driver) {
this.driver = driver;
}
public void openDepartureCalendar() {
driver.findElement(
departureDate
).click();
}
public void nextMonth() {
driver.findElement(
nextMonth
).click();
}
public void selectDate(String date) {
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
driver.findElement(
dateLocator
).click();
}
}</code></pre>
<hr>
<h2>103. Using Page Object Date Picker</h2>
<pre><code>BookingPage bookingPage =
new BookingPage(driver);
bookingPage.openDepartureCalendar();
bookingPage.selectDate(
"2026-06-15"
);</code></pre>
<hr>
<h2>104. Negative Testing</h2>
<p>Date picker automation should also test invalid scenarios.</p>
<ul>
<li>Selecting a disabled date.</li>
<li>Selecting a past date when past dates are restricted.</li>
<li>Selecting an unavailable appointment date.</li>
<li>Selecting an end date before the start date.</li>
<li>Leaving the date field empty.</li>
<li>Entering an invalid date format.</li>
<li>Closing the calendar without selecting a date.</li>
<li>Changing the month without selecting a date.</li>
</ul>
<hr>
<h2>105. Invalid Date Range</h2>
<p>A range picker may prevent an end date from being earlier than the start date.</p>
<pre><code>Start Date = 20 June 2026
End Date = 15 June 2026</code></pre>
<p>The application may display a validation message, prevent the selection, or apply another business rule.</p>
<hr>
<h2>106. Verifying Validation Message</h2>
<pre><code>WebElement error = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".date-error")
)
);
System.out.println(
error.getText()
);</code></pre>
<hr>
<h2>107. Date Picker and Regression Testing</h2>
<p>Date picker functionality should be included in regression testing whenever calendar-related functionality changes. Regression tests can cover date navigation, date selection, disabled dates, range selection, validation, and form submission.</p>
<hr>
<h2>108. Date Picker and Data-Driven Testing</h2>
<p>Different dates can be provided as test data.</p>
<pre><code>String[] dates = {
"2026-06-10",
"2026-06-15",
"2026-07-01"
};
for (String date : dates) {
System.out.println(date);
}</code></pre>
<hr>
<h2>109. Date Picker With External Test Data</h2>
<p>Dates can be stored in Excel, CSV, JSON, databases, or other test-data sources and passed into a reusable date-selection method.</p>
<pre><code>String testDate = "2026-06-15";
selectDate(
By.id("departureDate"),
testDate
);</code></pre>
<hr>
<h2>110. API-Driven Date Availability</h2>
<p>Some applications load available dates dynamically from a backend API.</p>
<pre><code>Open Calendar
↓
Application Requests Availability
↓
API Returns Available Dates
↓
Calendar Updates
↓
Available Dates Become Selectable
↓
Select Date</code></pre>
<hr>
<h2>111. Waiting for API-Loaded Dates</h2>
<pre><code>wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading-spinner")
)
);
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();</code></pre>
<hr>
<h2>112. Date Picker Accessibility Testing</h2>
<p>When accessibility is part of the test requirements, automation can verify attributes such as:</p>
<ul>
<li>ARIA roles</li>
<li>ARIA labels</li>
<li>ARIA selected state</li>
<li>Disabled state</li>
<li>Keyboard navigation</li>
<li>Accessible month and year information</li>
</ul>
<hr>
<h2>113. Date Picker Locator Comparison</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Approach</th><th>Example</th><th>Use</th></tr>
<tr><td>ID</td><td><code>By.id("dateField")</code></td><td>Unique date input</td></tr>
<tr><td>CSS Class</td><td><code>.datepicker</code></td><td>Calendar component</td></tr>
<tr><td>CSS Attribute</td><td><code>[data-date='2026-06-15']</code></td><td>Exact date</td></tr>
<tr><td>XPath Text</td><td><code>//button[normalize-space()='15']</code></td><td>Visible day</td></tr>
<tr><td>ARIA Label</td><td><code>[aria-label='June 15, 2026']</code></td><td>Accessible date</td></tr>
</table>
<hr>
<h2>114. Date Picker Best Practices</h2>
<ul>
<li>Inspect the HTML structure before writing automation.</li>
<li>Determine whether the date picker is native or custom.</li>
<li>Prefer stable IDs and data attributes.</li>
<li>Prefer exact date attributes over day-only locators.</li>
<li>Use explicit waits for dynamic elements.</li>
<li>Validate the month and year before selecting the day.</li>
<li>Re-locate elements after calendar navigation.</li>
<li>Scope locators when multiple calendars exist.</li>
<li>Test disabled and unavailable dates.</li>
<li>Verify the final date value.</li>
<li>Create reusable date-picker utility methods.</li>
<li>Use Page Object Model for maintainable frameworks.</li>
<li>Use Java date APIs for dynamic test data.</li>
</ul>
<hr>
<h2>115. Practical Mini Project</h2>
<p><strong>Project:</strong> Automate a hotel booking date range.</p>
<p><strong>Requirement:</strong> Select check-in as 10 June 2026 and check-out as 15 June 2026.</p>
<ol>
<li>Launch the browser.</li>
<li>Open the hotel booking application.</li>
<li>Click the check-in field.</li>
<li>Wait for the calendar.</li>
<li>Navigate to June 2026.</li>
<li>Select 10 June 2026.</li>
<li>Click the check-out field.</li>
<li>Select 15 June 2026.</li>
<li>Verify both values.</li>
<li>Click Search.</li>
<li>Verify the search results.</li>
</ol>
<hr>
<h2>116. Mini Project Code</h2>
<pre><code>driver.findElement(
By.id("checkIn")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-10']"
)
)
).click();
driver.findElement(
By.id("checkOut")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
String checkIn = driver.findElement(
By.id("checkIn")
).getAttribute("value");
String checkOut = driver.findElement(
By.id("checkOut")
).getAttribute("value");
System.out.println(
"Check-in: " + checkIn
);
System.out.println(
"Check-out: " + checkOut
);</code></pre>
<hr>
<h2>117. Real-World Applications</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Application</th><th>Date Picker Usage</th></tr>
<tr><td>Flight Booking</td><td>Departure and return dates</td></tr>
<tr><td>Hotel Booking</td><td>Check-in and check-out dates</td></tr>
<tr><td>Healthcare</td><td>Appointment dates</td></tr>
<tr><td>Banking</td><td>Transaction and statement dates</td></tr>
<tr><td>E-Commerce</td><td>Delivery dates</td></tr>
<tr><td>HR Systems</td><td>Joining and leave dates</td></tr>
<tr><td>Analytics</td><td>Report date ranges</td></tr>
<tr><td>Insurance</td><td>Policy dates</td></tr>
<tr><td>Education</td><td>Exam and enrollment dates</td></tr>
</table>
<hr>
<h2>118. Interview Question: What Is a Date Picker?</h2>
<p>A date picker is a UI component that allows users to select a date through a calendar interface. It can be implemented as a native HTML date input or as a custom JavaScript-based calendar.</p>
<hr>
<h2>119. Interview Question: How Do You Handle a Custom Date Picker?</h2>
<p>Inspect the calendar DOM, click the date field, wait for the calendar, identify the displayed month and year, navigate to the target month, locate the required day, click it, and verify the selected value.</p>
<hr>
<h2>120. Interview Question: How Do You Select a Future Date?</h2>
<p>Open the calendar, compare the current month and year with the target month and year, navigate using the next-month control until the target month is displayed, and then select the required day.</p>
<hr>
<h2>121. Interview Question: How Do You Handle a Date Range Picker?</h2>
<p>Select the start date first and the end date second. Then verify that both dates are displayed correctly and that the range follows the application's validation rules.</p>
<hr>
<h2>122. Interview Question: How Do You Handle Dynamic Date Pickers?</h2>
<p>Use explicit waits, re-locate elements after calendar navigation, and wait for the required month or target date to become available before interacting with it.</p>
<hr>
<h2>123. Interview Question: How Do You Avoid Selecting the Wrong Day?</h2>
<p>Do not rely only on the visible day number when duplicate dates can exist. Prefer an exact <code>data-date</code> attribute, accessible label, current-month class, or a calendar-scoped locator.</p>
<hr>
<h2>124. Interview Question: Why Does StaleElementReferenceException Occur?</h2>
<p>It can occur when the calendar DOM is refreshed after navigating between months. Previously located WebElements may no longer represent the current elements, so they should be located again.</p>
<hr>
<h2>125. Interview Question: Can Select Class Be Used for Date Pickers?</h2>
<p>The Selenium <code>Select</code> class can be used only with an actual HTML <code><select></code> element. A custom calendar made from divs, buttons, spans, or other elements should be handled using normal Selenium WebDriver interactions.</p>
<hr>
<h2>126. Interview Question: How Do You Verify the Selected Date?</h2>
<p>Read the value from the date input using <code>getAttribute("value")</code>, or inspect selected-state attributes such as a CSS class or <code>aria-selected</code>.</p>
<hr>
<h2>127. Interview Question: How Do You Handle Disabled Dates?</h2>
<p>Identify disabled dates through attributes such as <code>disabled</code>, CSS classes, or ARIA states and verify that the application prevents invalid selection.</p>
<hr>
<h2>128. Quick Revision</h2>
<ul>
<li>Identify the date picker type.</li>
<li>Native and custom date pickers require different strategies.</li>
<li>Open the calendar before selecting a date.</li>
<li>Read the displayed month and year.</li>
<li>Navigate to the target month and year.</li>
<li>Prefer exact date attributes when available.</li>
<li>Do not depend only on day numbers when duplicate dates exist.</li>
<li>Use explicit waits for dynamic calendars.</li>
<li>Re-locate elements after DOM updates.</li>
<li>Handle disabled and unavailable dates.</li>
<li>Handle date ranges separately.</li>
<li>Verify the selected date.</li>
<li>Use reusable methods and Page Object Model.</li>
</ul>
<hr>
<h2>129. Date Picker Testing Checklist</h2>
<ul>
<li>Verify date field is displayed.</li>
<li>Verify date field is clickable.</li>
<li>Verify calendar opens.</li>
<li>Verify current month and year.</li>
<li>Verify next-month navigation.</li>
<li>Verify previous-month navigation.</li>
<li>Verify year navigation when available.</li>
<li>Verify valid date selection.</li>
<li>Verify disabled date behavior.</li>
<li>Verify unavailable date behavior.</li>
<li>Verify today's date.</li>
<li>Verify date range selection.</li>
<li>Verify invalid date ranges.</li>
<li>Verify date format.</li>
<li>Verify final input value.</li>
<li>Verify calendar closing behavior.</li>
<li>Verify keyboard navigation when supported.</li>
<li>Verify accessibility attributes when required.</li>
<li>Verify behavior after page refresh.</li>
<li>Include date-picker tests in regression suites.</li>
</ul>
<hr>
<h2>130. Course Resource</h2>
<p>The <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">Selenium Training Course</a> covers Selenium WebDriver, locators, browser automation, web elements, waits, dynamic elements, forms, TestNG, automation frameworks, and practical testing concepts.</p>
<p>To enquire about the course or request a demo, visit <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a>.</p>
<hr>
<h2>131. Conclusion</h2>
<p>Date Picker automation is an important Selenium WebDriver skill because dates are used extensively in real-world web applications. The correct automation strategy depends on how the date picker is implemented.</p>
<p>For a reliable test, first inspect the DOM and identify whether the control is a native HTML date input or a custom calendar. For custom calendars, open the calendar, identify the displayed month and year, navigate to the required month, locate the exact target date, select it, and verify the resulting value.</p>
<p>Dynamic date pickers should be synchronized using explicit waits, while calendar elements should be re-located after DOM updates to reduce stale-element failures. Stable locators such as <code>data-date</code>, accessible labels, IDs, and calendar-scoped selectors can make date-picker automation more maintainable.</p>
<p>With reusable utility methods, Java's date APIs, explicit waits, Page Object Model, proper validation, and positive and negative test scenarios, Selenium testers can automate date selection effectively across flight booking, hotel booking, appointment, banking, e-commerce, reporting, and other applications.</p>
<p><a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">Selenium Training Course</a> | <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a></p>
</div>
